<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/front/include/taglib.jsp"%>
<%@ include file="/WEB-INF/front/include/header.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/assets/plugin/zxf_page/zxf_page.css" />
	<script type="text/javascript" src="${pageContext.request.contextPath}/assets/plugin/zxf_page/zxf_page.js"></script>
	<style type="text/css">
	 a.normal{
		 font-style: normal;
		 color: #1f78ed;
	 }
	 a {
    	text-decoration: none;
	 }
	 
	 input.btn-active {
	    background-color: #3399b4;
	    border: 1px solid #1f88ed;
	    color: #fff;
	 }
	 input.btn {
	    padding: 5px 10px;
	    background-color: #d6d9df;
	    border: 1px solid #d6d9df;
	    border-radius: 5px;
	    font-size: 12px;
	    color: #585858;
	    text-align: center;
	    cursor: pointer;
	    outline: none;
	    width: auto;
	 }
	 .activity_ul{
	 	list-style: none;
	 }
	 .activity_li{
	 	width: 1200px;
		overflow: hidden;
		border: 1px solid #e7e7e7;
		position: relative;
	 }
	 .activity_nei{
	 	margin: 30px 0 0 40px;
		overflow: hidden;
	 }
	 .activity_title{
	 	text-align: left;
		font-weight: 400;
		margin-bottom: 13px;
	 }
	 .activity_title a{
		color: #3366ff;
	 }
	 .activity_title span{
	 	color: #999;
	 }
	 .activity_title i{
	 	display: inline-block;
		vertical-align: middle;
		font-size: 22px;
		line-height: 22px;
		font-style: normal;
		color: #000;
		padding-right: 10px;
	 }
	 .activity_join{
	 	position: absolute;
		right: 189px;
		top: 70px;
		background-color: #36f;
		width: 140px;
		height: 36px;
		text-align: center;
	 }
	 
	 .activity_join.unactive{
	 	background-color: #36f;
	 }
	 
	 .activity_join a{
	 	display: block;
		color: #fff;
		line-height: 36px;
		font-size: 14px;
		text-decoration: none;
	 }
	 
	 .activity_detail{
	 	position: absolute;
		right: 39px;
		top: 70px;
		border: 1px solid #36f;
		width: 138px;
		height: 34px;
		background-color: #fff;
		text-align: center;
	 }
	 .activity_detail a{
	 	font-size: 14px;
		color: #36f;
		line-height: 36px;
		text-decoration: none;
	 }
	 .activity_nei p{
	 	font-size: 16px;
		line-height: 26px;
		color: #333;
	 }
	 .activity_nei span{
	 	color: #999;
	 }
	</style>
</head>
<body>
	<!-- PAGE CONTENT BEGIN -->
	<div style="width: 100%; overflow: auto;height:77%;">
		<div style="min-width: 700px;overflow: hidden;padding-top: 10px;padding-bottom: 30px;">
<!-- 			<h2>活动</h2> -->
			<form action="${pageContext.request.contextPath}/f/activityList" id="selectForm" method="post">
				<ul class="clearfix" style="overflow: hidden;height:45px;margin-top: 10px;list-style: none;">
					<li style="font-size: 14px;color: #696969;line-height: 30px;margin-right: 30px; float:right;">
						关键字:
						<input style="padding-left: 10px;width: 180px;height: 30px;border: 1px solid #eeeeee;color: #696969;" type="text" name="keyword" value="${keyword}">
						<input class="btn-active" type="submit" value="搜索">
					</li>
				</ul>
			</form>
		</div>
		<div style="width:1200px;margin:0 auto">
			<ul class="activity_ul">
				<c:forEach var="activity" items="${pageinfo.resultList}" varStatus="vstatus">
					<li class="activity_li">
						<div class="activity_nei">
							<h2 class="activity_title">
								<i>
									<a href="">
										${activity.title}
									</a>
								</i>
							</h2>
							<p>
								<span>活动地址：</span>
								${activity.address}
							</p>
							<p>
								<span>活动时间：</span>
								<fmt:formatDate value="${activity.activityTime}" pattern="yyyy-MM-dd HH:mm"/>
							</p>
						</div>
						<div class="activity_join">
							 <c:if test="${activity.attend ne '1' }">
                            	<a href="${pageContext.request.contextPath}/f/attendForm?id=${activity.id}" >立即报名</a>
                             </c:if>
                             <c:if test="${activity.attend eq '1' }">
                             	<a href="" class="unactive" >已报名</a>
                             </c:if>
                        </div>
                        <div class="activity_detail">
                        	<a href="${pageContext.request.contextPath}/f/activityDetail?id=${activity.id}">查看详情</a>
                        </div>
					</li>
				</c:forEach>
			</ul>
		</div>	
			<!-- 分页 -->
			<div class="toleft" style="box-sizing: border-box; width:1200px; margin: 40px auto;">
				<div class="zxf_pagediv"></div>
			</div>
	</div>
	<!-- PAGE CONTENT END -->
<script type="text/javascript">
	var path = '${pageContext.request.contextPath}';
	var totalPageNum = ${pageinfo.totalPageNum};
	var currentPage = ${pageinfo.currentPage};
	var paginationSize = ${pageinfo.paginationSize};
	// 分页
    $(".zxf_pagediv").createPage({
        pageNum: totalPageNum, //总页码
        current: currentPage, //当前页
        shownum: paginationSize, //每页显示个数
        //activepage: "",//当前页选中样式
        activepaf: "",//下一页选中样式
        backfun: function(e) {
            console.log(e);
            var formEle = $("#selectForm");
            var inputEle = $("<input type='hidden' name='reqPage' value='" + e.current + "'/>")
            formEle.append(inputEle);
            formEle.submit();
        }
    });
    $(function(){
    	$("#activity").addClass("active");
    });
	
</script>
</body>
<%@ include file="/WEB-INF/front/include/footer.jsp"%>
</html>